<template>
	<div>
		<van-nav-bar title="已维修设备列表" @click-left='goBack()' left-arrow=""></van-nav-bar>
		<div class="area">
			<!-- <van-search placeholder="搜索设备编号" v-model="searchData" show-action="">
				<div slot="action" @click="onSearch">搜索</div>
			</van-search> -->
       <van-search placeholder="搜索设备名称" @input='getObscureDevice' v-model="searchData" :clearable="true" show-action="">
       	<div slot="action" @click="onSearch">搜索</div>
       </van-search>
       <van-overlay :show="show" @click="show = false">
         <van-cell @click='getDeviceName(item.facilityname,item.id)' v-for="(item,i) in alldeviceList" :key='i' :title="item.facilityname"></van-cell>
       </van-overlay>
			<van-cell is-link v-for="(item,i) in deviceList" :key="i" :center="true" @click="goNext(item.facilityName)">
				<div class="title" slot="title">
					<span class="sort">{{i+1}}</span>
					<div class="deviceInfo">
						<div class="deviceNum">{{item.facilityid}}</div>
						<div class="deviceName">{{item.facilityName}}</div>
					</div>
				</div>
			</van-cell>
		</div>
	</div>
</template>

<script>
	import {
		Toast
	} from 'vant'
	export default {
		data() {
			return {
        show:false,
        errMsg:'',
        alldeviceList:[],
        deviceName:'',
        num:'',
				searchData: "",
				showkeywords: false,
				keep: false,
				name: true,
				department: true,
				deviceList: []
			};
		},
		created() {
			 this.getAllRepairList()
		},
		watch: {
      searchData(newVal){
        this.show = true
      },
		},
		methods: {
      //根据输入的设备名字获得具体的设备名称
      getDeviceName(name,id){
        this.searchData = name
        this.num = id
        this.onSearch()
      },
      //模糊查询获得设备列表
      getObscureDevice(){
        this.$axios.post('/Maintenance/obscureFacility.do',{facilityName:this.searchData}).then(res=>{
          if(res.data.status === 200){
            this.alldeviceList = res.data.msg
          }
        })
      },
			 getAllRepairList() {
      this.deviceList = [];
      this.$axios.post("/Maintenance/selectAllMaintenance.do").then(res => {
        if (res.data.status === 200) {

          this.deviceList = this.getOnly(res.data.msg)
          if (this.deviceList.length === 0) {
          	Toast.fail({
          		message: '暂无数据',
          		duration: 900
          	})
          }

        }
      });
    },
			onSearch() {
				this.deviceList = []
				this.$axios.post('/Maintenance/selectMaintenance.do', {
					facilityName: this.searchData,
					id: '',
					starttime: '',
					endtime: ''
				}).then(res => {
					if (res.data.status === 200) {
						this.deviceList = this.getOnly(res.data.msg)
						if (this.deviceList.length === 0) {
							Toast.fail({
								message: '暂无数据',
								duration: 900
							})
						}
					}

				})
			},
			goNext(facilityName) {
				this.$router.push({
					name: 'repairDetail',
					params: {
						facilityName: facilityName
					}
				})
			},
			getOnly(list){
				let newData = []
				let userName = JSON.parse(localStorage.cksLoginInfo).userName
				let userId = JSON.parse(localStorage.cksLoginInfo).id
				if(this.$route.params.isMe){
					list.map((value, index) => {
					  if (value.state === 3&&(value.maintenanceuserid == userId||value.maintanceusername == userName)) {
					    newData.push({
					      facilityid: value.facilityid,
					      facilityName: value.facilityName
					    });
					  }
					});
				}else{
					list.map((value, index) => {
					  if (value.state === 3) {
					    newData.push({
					      facilityid: value.facilityid,
					      facilityName: value.facilityName
					    });
					  }
					});
				}

				var arrays = newData;
				var result = [];
				var obj = [];

				var str;

				for (var i = 0; i < arrays.length; i++) {
				  str = JSON.stringify(arrays[i]);

				  if (obj.indexOf(str) == -1) {
				    result.push(arrays[i]);

				    obj.push(str);
				  }
				}

				return result
			}
		},

	};
</script>

<style scoped="scoped">
  .van-overlay{
    top: 7rem;
  }
	.van-button {
		color: #777;
	}

	.van-button--default {
		border: none;
	}

	.keywords {
		font-size: 0.8rem;
		color: #999999;
		margin-bottom: 0.8rem;
	}

	.addImg {
		vertical-align: middle;
		width: 1.4rem;
		height: 1.4rem;
	}

	.h6 {
		font-size: 0.87rem;
		margin: 0;
		margin-top: 0.7rem;
		padding: 0.5rem 0.7rem;
	}

	.deviceNum {
		color: #333333;
		font-size: 0.87rem;
		font-weight: 700;
		height: 1.5rem;
		line-height: 1.5rem;
	}

	.title {
		display: flex;
		align-items: center;
	}

	.title .sort {
		color: #888888;
		font-size: 0.85rem;
		width: 3rem;
		text-align: center;
	}

	.title .deviceInfo {
		flex: 7;
	}
</style>
